<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  用户名: <input type="text" id="username">
  <br>
  密码：<input type="text" id="password">
  <br>
  确认密码：<input type="text" id="surePassword">
  <br>
  昵称：<input type="text" id="nickName">
  <br>
  <button id="reg">注册</button>
  <br>

  <script>
    //   2 用户注册界面：
    // 用户名：只能是字母 数字 _ 组成，长度6-18位 
    // 密码：
    // 确认密码：两次密码一致
    // 昵称：输入的时候避免敏感字符，如果出现就替换***
    // 所有内容均不能为空
    var reg = document.getElementById("reg");
    reg.onclick = function () {
      var username = document.getElementById("username").value;//获取用户名
      var flag = true; //锁
      for (i = 0; i < username.length; i++) {  //dshfkashfd123123
        if ((username[i] >= "a" && username[i] <= "z") || (username[i] >= "A" && username[i] <= "Z") || (username[i] >= 0 && username[i] <= "9") || username[i] == "_") {

        } else {
          flag = false;
        }
      }
      // ---------------------------用户名
      if (username.length >= 6 && username.length <= 18 && username) {
        if (flag) {
          // alert("符合规则")
        } else {
          alert("不符合规则")
          return
        }
      } else {
        alert("用户名长度不对")
        return
      }
      // -------------------密码
      var passwrod = document.getElementById("password").value;
      var surePassword = document.getElementById("surePassword").value;
      if (passwrod && surePassword) { //非空判断
        if (passwrod !== surePassword) {
          alert("俩次密码不一致")
          return
        }
      } else {
        alert("密码不能为空")
        return
      }
      // 昵称替换敏感字符
      var nickName = document.getElementById("nickName").value;
      if (nickName) {
        var nickStr = nickName.replace("TMD", "***")
        document.getElementById("nickName").value = nickStr;//把替换后的字符串 赋值回输入框
      } else {
        alert("昵称不能为空")
        return
      }

      alert("注册成功")
    }


  </script>
</body>

</html>